<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td{
            text-align: center;
        }
    </style>
</head>
<body>
    <button id="addBtn">添加一条新的访客信息</button>
    <button id="selBtn">删除选中</button>
    <button id="ageBtn">年龄从小到大</button>
    <!-- 序列号  姓名    年龄    操作   选择 -->
    <table class="tab" border="1" cellspacing="0" cellpadding=10>
        <thead>
            <tr>
                <td>序列号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>操作</td>
                <td>勾选</td>
            </tr>
            <!-- <input class="fxk" type="checkbox"> -->
        </thead>
        <tbody>
            <!--
            <tr>
                <td>1</td>
                <td>胡杭</td>
                <td>16</td>
                <td><button>删除</button></td>
            </tr>
            -->
        </tbody>
    </table>
</body>
    <script>
        var info = [
            {name: "胡杭",age: 16}, 
            {name: "胜明",age: 22}, 
            {name: "军毅",age: 21}, 
            {name: "晓华",age: 13}, 
            {name: "盛聪",age: 23}, 
            {name: "侦剑",age: 32}, 
            {name: "红翔",age: 25}, 
            {name: "超维",age: 18}, 
            {name: "士琪",age: 22}, 
            {name: "艳华",age: 20}
        ];

        var tbody = document.querySelector("tbody");
        var addBtn = document.getElementById("addBtn");
        var selBtn = document.getElementById("selBtn");
        var ageBtn = document.getElementById("ageBtn");

        var delBtn = tbody.querySelectorAll("button");//操作列删除按钮

        var index = 0; // 模拟点击下标(每次自增1)

        addBtn.onclick = function(){
            // console.log(index);
            // 当前index值要小于数组长度,否则会报错，获取不到数组的值
            if(index < info.length){
                var newTr = document.createElement("tr");//创建tr标签;

                //向tr添加新td单元格
                newTr.innerHTML =  `
                <td>${index + 1}</td>
                <td>${info[index].name}</td>
                <td>${info[index].age}</td>
                <td><button>删除</button></td>
                <td><input class="scb" type="checkbox"></td>
                `; 

                //把创建的tr添加到tbody中;
                console.log(index%10);
                tbody.appendChild(newTr);

                //删除按钮删除单个信息
                delBtn = tbody.querySelectorAll("button");
                // console.log(delBtn);
                // 每个删除按钮绑定点击事件
                delBtn.forEach(function(el){
                    el.onclick = function(){
                        el.parentElement.parentElement.remove();
                    }
                });

            }
            // 添加完毕后自增
            index++;

        var scb = document.querySelectorAll(".scb") 
        selBtn.onclick = function(){
            scb.forEach(function(item){
                if(item.checked==true){
                    console.log(item);
                    console.log(item.checked);
                    item.parentNode.parentNode.remove();
                }
            })
        }

        ageBtn.onclick = function(){
            var trList = document.querySelectorAll("tr:not(:first-child)")
            var newArr = []
            trList.forEach(function(item){
                newArr.push(item)

            })
            newArr.sort(function(a,b){
                return (a.children[2].innerText) - (b.children[2].innerText)
            
            })
            newArr.forEach(function(item){
                tbody.appendChild(item)

            })
        }
    }

    </script>
</html>